<script setup lang="ts">

const props = defineProps({
  data: {
    type: Object,
  },
  imageIds: {
    type: [String],
  },
})

interface Option {
  text: string
  value: string
  merType: string[]
}

const certTitle = ref()
const respPersonTitle = ref()
const regCapTitle = ref()
const certAddrTitle = ref()
const showRegCap = ref(false)
const showCertDate = ref(true)

function dealTitle() {
  if (props.data && props.data.merType) {
    if (props.data.merType === '1') {
      certTitle.value = '统一社会信用代码'
      respPersonTitle.value = '经营者'
      regCapTitle.value = '注册资本（万元）'
      showRegCap.value = false
      certAddrTitle.value = '注册地址'
      showCertDate.value = true
    }
    if (props.data.merType === '2') {
      certTitle.value = '统一社会信用代码'
      respPersonTitle.value = '法定责任人'
      regCapTitle.value = '注册资本（万元）'
      showRegCap.value = true
      certAddrTitle.value = '注册地址'
      showCertDate.value = true
    }
    if (props.data.merType === '4') {
      certTitle.value = '统一社会信用代码'
      respPersonTitle.value = '法定代表人'
      regCapTitle.value = '开办资金（万元）'
      showRegCap.value = true
      certAddrTitle.value = '住所'
      showCertDate.value = true
    }
    if (props.data.merType === '5') {
      if (props.data.certType === '02') {
        certTitle.value = '统一社会信用代码'
        respPersonTitle.value = '法定代表人'
        regCapTitle.value = '开办资金（万元）'
        showRegCap.value = true
        certAddrTitle.value = '住所'
        showCertDate.value = true
      }
      else if (props.data.certType === '06') {
        certTitle.value = '统一社会信用代码'
        respPersonTitle.value = '负责人'
        regCapTitle.value = '开办资金（万元）'
        showRegCap.value = false
        certAddrTitle.value = '注册地址'
        showCertDate.value = false
      }
    }
    if (props.data.merType === '6') {
      certTitle.value = '证书编号'
      respPersonTitle.value = '责任人'
      regCapTitle.value = '开办资金（万元）'
      showRegCap.value = false
      certAddrTitle.value = '证照地址'
      showCertDate.value = true
    }
  }
}

onMounted(() => {
  dealTitle()
})

watch(() => props.data, () => {
  dealTitle()
})

const options = ref<Option[]>([
  { text: '营业执照', value: '01', merType: ['1', '2'] },
  { text: '事业单位法人证书', value: '02', merType: ['4', '5'] },
  { text: '身份证件', value: '03', merType: [] },
  { text: '其他证明文件', value: '04', merType: ['6'] },
  { text: '民办非企业单位登记证书', value: '05', merType: ['6'] },
  { text: '统一社会信用代码证书', value: '06', merType: ['5'] },
  { text: '社会团体法人证书', value: '07', merType: ['6'] },
  { text: '基金会法人登记证书', value: '08', merType: ['6'] },
  { text: '执业许可证/执业证', value: '09', merType: ['6'] },
  { text: '基层群众性自治组织特别法人统一社会信用代码证', value: '10', merType: ['6'] },
  { text: '农村集体经济组织登记证', value: '11', merType: ['6'] },
  { text: '宗教活动场所登记证', value: '12', merType: ['6'] },
  { text: '慈善组织公开募捐资格证书', value: '13', merType: ['6'] },
])
</script>

<template>
  <nut-cell-group v-if="props.data" title="证照信息">
    <image-list :image-ids="imageIds" />
    <option-select
      :model-value="props.data.certType"
      title="证件类型"
      readonly
      :options="options"
    />
    <nut-cell :title="certTitle" :desc="props.data.certNo" />
    <nut-cell title="商户名称" :desc="props.data.merName" />
    <nut-cell title="商户简称" :desc="props.data.merShortName" />
    <tempalte v-if="showCertDate">
      <nut-cell title="发证日期" :desc="props.data.certStartDate" />
      <nut-cell title="到期日期" :desc="props.data.certEndDate" />
    </tempalte>
    <nut-cell :title="respPersonTitle" :desc="props.data.respPerson" />
    <nut-cell v-if="showRegCap" :title="regCapTitle" :desc="props.data.regCap" />
    <nut-cell :title="`${certAddrTitle}省市区`" :desc="props.data.certArea" />
    <nut-cell :title="`${certAddrTitle}地址`" :desc="props.data.certAddrDet" />
    <nut-cell title="经营省市区" :desc="props.data.businessArea" />
    <nut-cell title="经营地址" :desc="props.data.bizAddrDet" />
  </nut-cell-group>
  <nut-skeleton
    v-else
    width="250px"
    height="15px"
    animated
    row="3"
  />
</template>

<style lang="sass" scoped>
.desc
  width: 200px
</style>
